<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<head>
<title>Detail</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="/css/home/style.css" rel="stylesheet" type="text/css" media="all"/>
	<script type="text/javascript" src="/js/common/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/js/home/move-top.js"></script>
	<script type="text/javascript" src="/js/home/easing.js"></script>
	<script src="/js/home/slides.min.jquery.js"></script>
	<script src="/js/home/easyResponsiveTabs.js" type="text/javascript"></script>
	<link href="/css/home/easy-responsive-tabs.css" rel="stylesheet" type="text/css" media="all"/>
	<link rel="stylesheet" href="/css/home/global.css">
<script>
		$(function(){
			$('#products').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				effect: 'slide, fade',
				crossfade: true,
				slideSpeed: 350,
				fadeSpeed: 500,
				generateNextPrev: true,
				generatePagination: false
			});
		});
	</script>
</head>
<body>
  <div class="wrap">
	<div class="header">
		<div class="headertop_desc">
			<div class="call">
				 <p><span>客服电话:</span><span class="number">188-1412-7570</span></p>
			</div>
			<div class="account_desc">
				<ul>
					<li><a href="#">退出</a></li>
					<li><a href="#">Login</a></li>
					<li><a href="#">Delivery</a></li>
					<li><a href="#">Checkout</a></li>
					<li><a href="#">My Account</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="header_top">
			<div class="logo">
				<a href="/home/item.action?userId=${User.userId}&item=home"><img src="/images/icon/logo.png" alt="" /></a>
			</div>
			  <div class="cart">
					   <a href="/home/item.action?userId=${User.userId}&item=cart"><input type="button" class="input-button" value="去购物车结算"></a>
			  </div>
			  <script type="text/javascript">
			function DropDown(el) {
				this.dd = el;
				this.initEvents();
			}
			DropDown.prototype = {
				initEvents : function() {
					var obj = this;

					obj.dd.on('click', function(event){
						$(this).toggleClass('active');
						event.stopPropagation();
					});	
				}
			}

			$(function() {

				var dd = new DropDown( $('#dd') );

				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-2').removeClass('active');
				});

			});

		</script>
	 <div class="clear"></div>
  </div>
	<div class="header_bottom">
	     	<div class="menu">
	     		<ul>
					<li id="go_home"><a href="/home/item.action?userId=${User.userId}&item=home">主页</a></li>
					<li id="go_cart"><a href="/home/item.action?userId=${User.userId}&item=cart">购物车</a></li>
					<li id="go_order"><a href="/home/item.action?userId=${User.userId}&item=order">我的订单</a></li>
					<li id="go_collection"><a href="/home/item.action?userId=${User.userId}&item=collection">我的收藏</a></li>
					<li id="go_info"><a href="/home/item.action?userId=${User.userId}&item=info">个人信息</a></li>
					<li id="go_address"><a href="/home/item.action?userId=${User.userId}&item=address">收货地址</a></li>
					<li id="go_complaint"><a href="/home/item.action?userId=${User.userId}&item=complaint">投诉</a></li>
					<li id="go_suggest"><a href="/home/item.action?userId=${User.userId}&item=suggest">建议</a></li>
					<li id="go_about"><a href="/home/item.action?userId=${User.userId}&item=about">关于</a></li>
			    	<div class="clear"></div>
     			</ul>
	     	</div>
	     	<div class="search_box">
	     		<form>
	     			<input type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}"><input type="submit" value="">
	     		</form>
	     	</div>
	     	<div class="clear"></div>
	     </div>	     	
   </div>
 <div class="main">
    <div class="content">
    	<div class="content_top">
    	</div>
    	<div class="section group">
				<div class="cont-desc span_1_of_2">
				  <div class="product-details">				
					<div class="grid images_3_of_2">
						<div id="container">
						   <div id="products_example">
							   <div id="products">
								<div class="slides_container">
									<a href="#" target="_blank"><img src="/images/picture/productslide-1.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/picture/productslide-2.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/picture/productslide-3.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/picture/productslide-4.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/picture/productslide-5.jpg" alt=" " /></a>
									<a href="#" target="_blank"><img src="/images/picture/productslide-6.jpg" alt=" " /></a>
								</div>
								<ul class="pagination">
									<li><a href="#"><img src="/images/picture/thumbnailslide-1.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/picture/thumbnailslide-2.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/picture/thumbnailslide-3.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/picture/thumbnailslide-4.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/picture/thumbnailslide-5.jpg" alt=" " /></a></li>
									<li><a href="#"><img src="/images/picture/thumbnailslide-6.jpg" alt=" " /></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="desc span_3_of_2">
					<h2> ${Goods.name} </h2>
					<p> ${Goods.description}</p>
					<div class="price">
						<p>Price: <span>￥${Goods.price}</span></p>
					</div>
					<div class="available">
						<p>Available Options :</p>
					<ul>
						<li>Color:
							<select>
							<option>Silver</option>
							<option>Black</option>
							<option>Dark Black</option>
							<option>Red</option>
						</select></li>
						<li>Size:<select>
							<option>Large</option>
							<option>Medium</option>
							<option>small</option>
							<option>Large</option>
							<option>small</option>
						</select></li>
						<li>Quality:<select>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select></li>
					</ul>
					</div>
				<div class="share-desc">
					<br>
					<br>
					<div class="add-cart"><h4><a href="#">Add to Cart</a></h4></div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="clear"></div>
		  </div>
		<div class="product_desc">	
			<div id="horizontalTab">
				<ul class="resp-tabs-list">
					<li>商品信息</li>
					<li>售后保障</li>
					<li>商品评价</li>
					<div class="clear"></div>
				</ul>
				<div class="resp-tabs-container">
					<div class="product-desc" style="padding: 20px">
						${Goods.information}
					</div>

				 <div class="product-tags">
					 <br>
					 <h4>商家承诺:</h4>
					 <p> 新天地平台卖家销售并发货的商品，会提供发票和相应的售后服务。请您放心购买！ </p>
					 <p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p>
					 <br>
					 <h4>品质保证:</h4>
					 <p> 商城向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票 </p>
					 <br>
					 <h4>无忧退换:</h4>
					 <p> 客户购买商城商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。 </p>
					 <br>

			    </div>	

				<div class="review">
					<c:forEach items="${CommentList}" var="comment">
						<div class="comment_container">
							<h4 style="vertical-align: middle"><img src="/images/icon/user.png" width="25" height="25"> ${comment.userName}： <img src="/images/icon/star/star${comment.star}.png" height="25" width="110"></h4>
							<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${comment.content}</h3>
						</div>
					</c:forEach>
					<p>共${CommentList.size()}条评论</p>
				</div>
			</div>
		 </div>
	 </div>
	    <script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion           
            width: 'auto', //auto or any width like 600px
            fit: true   // 100% fit in a container
        });
    });
   </script>		
   <div class="content_bottom">
    		<div class="heading">
    		<h3>品牌其它商品</h3>
    		</div>
    		<div class="clear"></div>
    	</div>
   <div class="section group">
	   <c:forEach items="${RelatedGoodsList}" var="goods">
		   <div class="grid_1_of_4 images_1_of_4">
			   <a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank"><img src="${goods.goodsImage}" alt=""></a>
			   <div class="price" style="border:none">
				   <div class="add-cart" style="float:none">
					   <h4><a href="#">加入购物车</a></h4>
				   </div>
				   <div class="clear"></div>
			   </div>
		   </div>
	   </c:forEach>
				<%--<div class="grid_1_of_4 images_1_of_4">
					 <a href="#"><img src="/images/picture/new-pic1.jpg" alt=""></a>
					<div class="price" style="border:none">
					       		<div class="add-cart" style="float:none">								
									<h4><a href="#">Add to Cart</a></h4>
							     </div>
							 <div class="clear"></div>
					</div>
				</div>
				<div class="grid_1_of_4 images_1_of_4">
					<a href="#"><img src="/images/picture/new-pic2.jpg" alt=""></a>
					 <div class="price" style="border:none">
					       		<div class="add-cart" style="float:none">								
									<h4><a href="#">Add to Cart</a></h4>
							     </div>
							 <div class="clear"></div>
					</div>
				</div>
				<div class="grid_1_of_4 images_1_of_4">
					<a href="#"><img src="/images/picture/new-pic4.jpg" alt=""></a>
					<div class="price" style="border:none">
					       		<div class="add-cart" style="float:none">								
									<h4><a href="#">Add to Cart</a></h4>
							     </div>
							 <div class="clear"></div>
					</div>
				</div>
				<div class="grid_1_of_4 images_1_of_4">
				 <img src="/images/picture/new-pic3.jpg" alt="">
					 <div class="price" style="border:none">
					       		<div class="add-cart" style="float:none">								
									<h4><a href="#">Add to Cart</a></h4>
							     </div>
							 <div class="clear"></div>
					</div>
				</div>--%>
			</div>
        </div>
				<div class="rightsidebar span_3_of_1">
					<h2>CATEGORIES</h2>
					<ul>
				      <li><a href="#">Mobile Phones</a></li>
				      <li><a href="#">Desktop</a></li>
				      <li><a href="#">Laptop</a></li>
				      <li><a href="#">Accessories</a></li>
				      <li><a href="#">Software</a></li>
				       <li><a href="#">Sports &amp; Fitness</a></li>
				       <li><a href="#">Footwear</a></li>
				       <li><a href="#">Jewellery</a></li>
				       <li><a href="#">Clothing</a></li>
				       <li><a href="#">Home Decor &amp; Kitchen</a></li>
				       <li><a href="#">Beauty &amp; Healthcare</a></li>
				       <li><a href="#">Toys, Kids &amp; Babies</a></li>
    				</ul>
    				<div class="subscribe">
    					<h2>Newsletters Signup</h2>
    						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.......</p>
						    <div class="signup">
							    <form>
							    	<input type="text" value="E-mail address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'E-mail address';"><input type="submit" value="Sign up">
							    </form>
						    </div>
      				</div>
      				 <div class="community-poll">
      				 	<h2>Community POll</h2>
      				 	<p>What is the main reason for you to purchase products online?</p>
      				 	<div class="poll">
      				 		<form>
      				 			<ul>
									<li>
									<input type="radio" name="vote" class="radio" value="1">
									<span class="label"><label>More convenient shipping and delivery </label></span>
									</li>
									<li>
									<input type="radio" name="vote" class="radio" value="2">
									<span class="label"><label for="vote_2">Lower price</label></span>
									</li>
									<li>
									<input type="radio" name="vote" class="radio" value="3">
									<span class="label"><label for="vote_3">Bigger choice</label></span>
									</li>
									<li>
									<input type="radio" name="vote" class="radio" value="5">
									<span class="label"><label for="vote_5">Payments security </label></span>
									</li>
									<li>
									<input type="radio" name="vote" class="radio" value="6">
									<span class="label"><label for="vote_6">30-day Money Back Guarantee </label></span>
									</li>
									<li>
									<input type="radio" name="vote" class="radio" value="7">
									<span class="label"><label for="vote_7">Other.</label></span>
									</li>
									</ul>
      				 		</form>
      				 	</div>
      				 </div>
 				</div>
 		</div>
 	</div>
    </div>
 </div>
   <div class="footer">
   	  <div class="wrap">	
	     <div class="section group">
				<div class="col_1_of_4 span_1_of_4">
						<h4>Information</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Advanced Search</a></li>
						<li><a href="delivery.html">Orders and Returns</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						</ul>
					</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Why buy from us</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Privacy Policy</a></li>
						<li><a href="contact.html">Site Map</a></li>
						<li><a href="#">Search Terms</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>My account</h4>
						<ul>
							<li><a href="contact.html">Sign In</a></li>
							<li><a href="index.html">View Cart</a></li>
							<li><a href="#">My Wishlist</a></li>
							<li><a href="#">Track My Order</a></li>
							<li><a href="contact.html">Help</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Contact</h4>
						<ul>
							<li><span>+91-123-456789</span></li>
							<li><span>+00-123-000000</span></li>
						</ul>
						<div class="social-icons">
							<h4>Follow Us</h4>
					   		  <ul>
							      <li><a href="#" target="_blank"><img src="/images/icon/facebook.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/twitter.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/skype.png" alt="" /> </a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/dribbble.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/linkedin.png" alt="" /></a></li>
							      <div class="clear"></div>
						     </ul>
   	 					</div>
				</div>
			</div>			
        </div>
    </div>
   <script type="text/javascript">
		$(document).ready(function() {			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
</body>
</html>

